<template>
  <div class="custom-page w-100">
    <el-container>
      <el-main class="h-100">
        <div class="search-box">
          <el-form
            label-position="right"
            class="search-bar"
            :model="form"
            inline
          >
            <!-- 新增场景 -->
            <el-form-item>
              <el-button type="primary" size="small" @click="createScene">
                新增场景
              </el-button>
              <!-- 选择类型 -->
              <el-radio-group
                v-model="form.searchType"
                style="margin: 0 20px"
                size="small"
                @change="
                  getScene()
                  getSceneArea()
                "
              >
                <el-radio-button label="1">全部场景</el-radio-button>
                <el-radio-button label="2">系统场景</el-radio-button>
                <el-radio-button label="3">自定义场景</el-radio-button>
              </el-radio-group>
              <!-- 选择器 -->
              <el-select
                v-model="form.areaType"
                filterable
                size="small"
                allow-create
                default-first-option
                placeholder="请选择场景类型"
                style="width: 180px"
                @change="
                  getScene()
                  getSceneArea()
                "
              >
                <el-option label="全部" :value="''" />
                <el-option
                  v-for="item in areaTypeList"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="'在线定位:'">
              <el-autocomplete
                popper-class="search-hint-box"
                :fetch-suggestions="querySearch"
                :trigger-on-focus="false"
                v-model="searchWord"
                placeholder="请输入关键字"
                @select="selectSearchWord"
                style="width: 300px"
                :loading="wordLoading"
              >
                <i class="el-icon-search el-input__icon" slot="suffix"> </i>
                <template slot-scope="{ item }">
                  <div v-show="item">
                    <i class="el-icon-search el-input__icon"></i>
                    <span class="name" :title="item.name">{{ item.name }}</span>
                  </div>
                  <div v-show="!item" style="textalign: center">暂无数据</div>
                </template>
              </el-autocomplete>
              <el-button
                :loading="statisticsLoding"
                style="margin-left: 20px"
                type="primary"
                plain
                size="small"
                @click="statisticsScene"
              >
                生成统计
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--  -->
        <div class="w-100 h-100 customPage-main" style="display: flex">
          <div class="tree-box" :class="[isCollapse ? '' : 'tree-box-hidden']">
            <div class="show-menu-btn show-left" @click="showMenuClick">
              <i class="el-icon-back"></i>
            </div>
            <div
              v-if="!slowShow"
              class="show-menu-btn hidden-left"
              @click="showMenuClick"
            >
              <i class="el-icon-right"></i>
            </div>
            <div
              :class="[
                isCollapse
                  ? 'tree-box-head tree-box-padding'
                  : 'tree-box-head tree-box-padding d-none',
              ]"
            >
              <div class="tree-search">
                <el-input
                  class="customInput"
                  placeholder="请输入关键字"
                  v-model="textInput"
                  size="mini"
                  @keyup.enter.native="inputSearch"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="inputSearch"
                    size="mini"
                  ></el-button>
                </el-input>
              </div>
            </div>
            <div
              :class="[slowShowTree ? 'd-none' : '']"
              v-loading="treeLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              style="height: calc(100% - 72px); overflow: auto"
            >
              <el-tree
                v-if="showTree"
                class="custom-el-tree"
                :data="treeData"
                :props="{ label: 'name' }"
                @node-click="nodeClick"
                :highlight-current="true"
                node-key="id"
                ref="tree"
                default-expand-all
                :expand-on-click-node="false"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span :title="node.label">
                    <el-tag
                      type="warning"
                      size="mini"
                      v-if="data.sourceType !== 1"
                      >自定义</el-tag
                    >
                    {{
                      node.label.length > 10
                        ? node.label.substring(0, 10) + '...'
                        : node.label
                    }}
                  </span>
                  <!-- <span class="operation" v-if="data.sourceType !== 1"> -->
                  <span class="operation">
                    <div
                      class="el-icon-edit-outline"
                      :style="`
                        marginRight: 10px;
                        color: #86B4FF;
                        cursor:  pointer;
                      `"
                      @click.stop="editNode(node, data)"
                    ></div>
                    <div
                      class="el-icon-delete"
                      :style="`
                        color: #86B4FF;
                        cursor: pointer;
                      `"
                      @click.stop="deleteBtn(node, data)"
                    ></div>
                  </span>
                </span>
              </el-tree>
            </div>
            <div>
              <el-pagination
                v-show="total > pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                background
                layout=" prev, pager, next"
                :pager-count="5"
                small
                :total="total"
              ></el-pagination>
            </div>
          </div>
          <div class="map-box h-100">
            <!-- <el-tooltip content="新增场景" placement="right">
              <div class="button-box">
                <el-button @click="createScene" class="button-btn">
                  <img src="/img/left-menu/edit.png" alt="" />
                </el-button>
              </div>
            </el-tooltip> -->
            <iframe
              name="gis"
              class="w-100 h-100 position-relative iframe-c"
              @load="iframeLoaded()"
              src="/Gis/sceneEdit.html"
              frameborder="no"
              border="0"
              marginwidth="0"
              marginheight="0"
              scrolling="no"
            ></iframe>
            <!--  -->
            <div class="map-bottom-left-box">
              <div class="map-select-box">
                <div
                  v-for="(item, index) in mapList"
                  :key="index"
                  v-show="item.id !== mapId"
                  @click="
                    mapId = item.id
                    setMapId(mapId)
                  "
                >
                  <img :src="item.src" />
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
            <!--  -->
          </div>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      :title="editState ? '编辑场景' : '新增场景'"
      top="0"
      :modal="false"
      :modal-append-to-body="false"
      :visible.sync="nameDialog"
      width="400px"
      :close-on-click-modal="false"
      @close="cancelBtn"
    >
      <el-form :model="nameForm" ref="sceneForm">
        <el-form-item
          label="场景名称："
          label-width="150px"
          prop="name"
          :rules="nameFormRules.name"
        >
          <el-input
            placeholder="请输入场景名称"
            v-model="nameForm.name"
            style="width: 180px"
          ></el-input>
        </el-form-item>
        <el-form-item label="场景所在省：" label-width="150px">
          <el-select
            v-model="nameForm.provId"
            disabled
            placeholder="请输入场景所在省"
            style="width: 180px"
          >
            <el-option
              v-for="item in cityOpt"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="场景所在城市：" label-width="150px">
          <el-select
            v-model="nameForm.cityId"
            disabled
            placeholder="请输入场景所在城市"
            style="width: 180px"
          >
            <el-option
              v-for="item in currentCityList.depCityList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="场景所在区县："
          label-width="150px"
          prop="zid"
          :rules="nameFormRules.zid"
        >
          <el-select
            v-model="nameForm.zid"
            placeholder="请选择场景所在区县"
            style="width: 180px"
          >
            <el-option
              v-for="item in currentZoneList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="场景类型：" label-width="150px">
          <el-select
            v-model="nameForm.areaType"
            filterable
            allow-create
            default-first-option
            placeholder="请选择场景类型"
            style="width: 180px"
          >
            <el-option
              v-for="item in areaTypeList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="nameDialog = false">取消</el-button>
        <el-button @click="saveBtn">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
var gisObj
import Collapse from '@/components/gisPageComponents/collapse'
import { mapState, mapGetters } from 'vuex'
import { changeMap } from '@/utils/gisObjFun.js'
import { CoordinateUtil } from '@/utils/index.js'
let timer = null
export default {
  components: {
    Collapse,
  },
  data() {
    return {
      areaList: [],
      esriPolygonObj: {}, //当前新增或者编辑的Polygon对象
      ptsObj: {}, //当前新增或者编辑的pts对象
      ptsMap: [], //存储的数组列表
      mapId: 1, //当前平面图
      mapList: [
        { src: '/img/floor-plan.png', name: '平面图', id: 1 },
        { src: '/img/satellite-imagery.png', name: '卫星图', id: 2 },
      ],
      textInput: '',
      nameDialog: false,
      nameForm: {
        /**
         * 场景所在省id
         */
        provId: '',
        /**
         * 场景所在城市id
         */
        cityId: '',
        /**
         * 场景所在区县id
         */
        zid: '',
        /**
         * 场景名称
         */
        name: '',
        /**
         * 场景边界
         */
        boundary: '',
        /**
         * 场景类型
         */
        areaType: '',
        /**
         * 场景小分类
         */
        type: '',
        /**
         * 场景小分类编码
         */
        typeCode: '',
        /**
         * 乡镇id
         */
        townId: '',
        /**
         * 场景id
         * 需要传递绘制完后的场景id
         */
        areaId: '',
      },

      nameFormRules: {
        name: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
        zid: [{ required: true, message: '请选择区县', trigger: 'change' }],
      },
      form: {
        zoneId: '',
        areaType: '', //场景类型
        searchType: '1', //选择的场景类型
      },
      loading: true,
      treeLoading: false,
      treeData: [],
      drawData: {},
      isDelete: false,
      defaultCheck: [],
      nowCheckId: '',
      oldCheckId: '',
      ifCheck: true,
      dictionary: [],
      isCollapse: true,
      ifDeleteOrEdit: false, // 点击编辑删除时默认会触发树状图点击事件，防止触发
      showSceneData: false,
      editState: false,
      userBottom: 160,
      coverageBottom: 320,
      surplusNum: 8,
      slowShow: true,
      slowShowTree: false,
      iframeLoad: false,
      boundingLoad: false,
      needCellType: 4,

      reportState: 0, //  报告的状态 正在生成是0
      showTree: true,

      searchWord: '',
      wordList: [],
      wordLoading: false,

      cityOpt: [],
      currentCityList: [],
      currentZoneList: [],
      areaTypeList: [
        '居民区',
        '产业园区',
        '商务写字楼',
        '政府及事业单位',
        '高校',
        '商业区',
        'AB集团'
      ],

      pageSize: 15,
      pageNum: 1,
      total: 1,
      editNowData: {},
      editOver: true,
      newOver: true,

      statisticsLoding: false,
    }
  },
  provide() {
    return {
      cityList: this.dictionary,
    }
  },
  computed: {
    ...mapState(['home', 'gis']),
    ...mapGetters(['dict']),
  },
  created() {
    this.getZone()
    this.getScene()
    // this.getSceneArea() //展示所有场景
    console.log(this.home)
    // 初始化设置
    this.getAllCity()
    this.getZoneByCity(this.home.userInfoVo.cityId)
  },
  mounted() {},
  watch: {
    defaultCheck: {
      handler(newValue) {
        if (newValue.length == 0) {
          ;(this.nowCheckId = ''), (this.ifCheck = true)
        } else {
          if (newValue.indexOf(this.nowCheckId) == -1) {
            ;(this.nowCheckId = ''), (this.ifCheck = true)
          }
        }
      },
      immediate: true,
      deep: true,
    },
    isCollapse: {
      // 控制侧边栏显隐
      handler(newValue) {
        if (!newValue) {
          this.slowShowTree = !this.slowShowTree
          setTimeout(() => {
            this.slowShow = !this.slowShow
          }, 1000)
        } else {
          this.slowShow = !this.slowShow
          setTimeout(() => {
            this.slowShowTree = !this.slowShowTree
          }, 1000)
        }
      },
    },
    boundingLoad(val) {
      if (val && this.iframeLoad) {
        let _this = this
        _this.nowInitMap()
      }
    },
    iframeLoad(val) {
      if (val && this.boundingLoad) {
        let _this = this
        _this.nowInitMap()
      }
    },
  },
  methods: {
    showMenuClick() {
      this.isCollapse = !this.isCollapse
    },

    // 复选框点击
    boxCheck(val1, val2) {
      if (val2.checkedKeys.length > this.defaultCheck.length) {
        this.setScene(val1)
        this.defaultCheck = [val1]
        this.$refs.tree.setCheckedKeys([val1], false)
      } else {
        gisObj.removeScene(val1.id)
        this.defaultCheck = []
        this.$refs.tree.setCheckedKeys([], false)
      }
    },
    // 节点点击
    nodeClick(data, data2) {
      // 页面在新建编辑框打开中不可使用额外功能
      if (this.nameDialog) {
        this.$message({
          message: '请先完成新增或编辑功能!',
          type: 'warning',
        })
        return
      }
      console.log(data)
      this.nowCheckId = data.areaId
      if (this.ifDeleteOrEdit) {
        this.ifDeleteOrEdit = !this.ifDeleteOrEdit
      } else if (this.editOver) {
        // 删除之前选择的场景区域
        if (this.oldCheckId) {
          gisObj.removeScene(this.oldCheckId)
        }

        if (this.defaultCheck.indexOf(data.areaId) == -1) {
          this.defaultCheck = [data.areaId]
          let sceneData = {
            boundary: data.boundary,
            id: data.areaId,
            name: data.name,
          }
          this.setScene(sceneData)

          this.oldCheckId = data.areaId

          gisObj.locateScene(data.areaId)
          // gisObj.locateById(data.areaId)
          //  gisObj.locateById(data.areaId)
        } else {
          this.defaultCheck = []

          this.$refs.tree.setCurrentKey(null)
          // 重载组件解决 取消当前节点高亮失效的问题
          this.showTree = false
          this.$nextTick(() => {
            this.showTree = true
          })

          // 如果为删除节点 则 return出去  不执行下述编辑方法
          return
        }
      }
    },
    // 编辑 当前节点
    editNode(node, data) {
      // 页面在新建编辑框打开中不可使用额外功能
      if (this.nameDialog) {
        this.$message({
          message: '请先完成新增或编辑功能!',
          type: 'warning',
        })
        return
      }
      console.log(data, this.oldCheckId)
      if (this.oldCheckId != data.areaId) {
        this.nodeClick(data)
      }
      if (this.newOver && this.editOver) {
        gisObj.locateScene(data.areaId)
        gisObj.editScene()
        this.editNowData = data
        this.editState = true
        this.editOver = false
      } else if (!this.newOver) {
        this.$message({
          message: '请先完成新增再编辑!',
          type: 'warning',
        })
      } else if (!this.editOver) {
        this.$message({
          message: '双击地图完成编辑!',
          type: 'warning',
        })
      }
    },
    // 编辑按钮
    editBtn() {
      gisObj.editScene()
    },
    // 编辑结束
    editEnded(data) {
      this.nameForm = {
        ...this.editNowData,
        provId: this.home.userInfoVo.provinceId,
        boundary: data.boundary,
      }
      this.getZoneByBoundaries(data.boundary)
    },
    // 删除
    deleteBtn(node, data) {
      // 页面在新建编辑框打开中不可使用额外功能
      if (this.nameDialog) {
        this.$message({
          message: '请先完成新增或编辑功能!',
          type: 'warning',
        })
        return
      }
      if (this.editOver && this.newOver) {
        this.$confirm('场景一旦删除将不可恢复，确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.isDelete = true
            this.deleteScene(data.areaId)
            this.ifDeleteOrEdit = true
          })
          .catch(() => {})
      } else if (!this.editOver) {
        this.$message({
          message: '双击地图完成编辑',
          type: 'warning',
        })
      } else if (!this.newOver) {
        this.$message({
          message: '请完成新增再删除',
          type: 'warning',
        })
      }
    },
    // 卫星图切换 -t
    setMapId(mapId) {
      // console.log(mapId, gisObj)
      changeMap(mapId, gisObj)
    },
    mapDeleteBtn() {
      this.deleteScene(this.nowCheckId)
    },
    // 删除按钮
    deleteScene(areaId) {
      gisObj.removeScene(areaId)
      this.treeLoading = true
      this.api.delArea({ areaId: areaId }).then(data => {
        // console.log( data )
        if (data.code == 1) {
          this.$message({
            message: '删除成功',
            type: 'success',
          })
          gisObj.delArea(areaId)
        } else {
          this.$message({
            message: '场景删除失败,请联系管理员。',
            type: 'warning',
          })
        }
        this.getScene()
        this.treeLoading = false
      })
    },

    // 搜索框改变 获取 搜索词
    async querySearch(queryString, cb) {
      if (!queryString) {
        cb([])
      } else {
        this.wordLoading = true
        let cityName = this.home.userInfoVo.cityName
        let params = {
          queryString,
          cityName,
        }
        let res = await this.api.getMapSearch(params)
        console.log(res)
        if (res == undefined) return cb([''])
        // 调用 callback 返回建议列表的数据
        if (res.code != 1 || res.data.results.length == 0) {
          cb([''])
        } else {
          cb(res.data.results)
        }
        this.wordLoading = false
      }
    },

    // 定位点转换

    // 点击搜索列表的词 跳转点
    selectSearchWord(e) {
      console.log(e)
      if (e) {
        gisObj.removeScene(111111)
        this.searchWord = e.name
        let location = CoordinateUtil.getWgs84xy(e.location.lng, e.location.lat)
        let params = {
          id: 111111,
          name: e.name,
          boundary: location.lng + '_' + location.lat,
        }
        console.log(params)
        gisObj.locateByPoint(location.lng, location.lat)
        gisObj.addScene(params)
      } else {
        this.searchWord = ''
      }

      console.log(this.searchWord)
    },

    // },
    // 获取省市列表
    getAllCity() {
      this.api.getAllProvinceCity().then(res => {
        if (res.code == 1) {
          this.cityOpt = res.data

          this.currentCityList = res.data.find(
            item => item.id == this.home.userInfoVo.provinceId,
          )
        }
      })
    },

    // 获取 区县列表
    getZoneByCity(cityId) {
      return this.api.getZoneByCity({ cityId }).then(res => {
        if (res.code == 1) {
          this.currentZoneList = res.data
          return res.data
        } else {
          return []
        }
      })
    },

    // 获取 自定义边界的取消列表
    getZoneByBoundaries(boundary) {
      let params = {
        cityId: this.home.userInfoVo.cityId,
        boundary: boundary,
      }
      this.api
        .getZoneByBoundaries(params)
        .then(res => {
          console.log(res)
          if (res.code == 1) {
            if (res.data === null) {
              this.$message({
                message: '未关联到相关区，请自主选择。',
                type: 'warning',
              })
              return this.getZoneByCity
            }
            this.nameForm.zid = res.data.id
            return res.data
          }
        })
        .then(result => {
          this.nameDialog = true
        })
    },

    // 获取场景类型
    getAreaList() {
      this.api.getAreaType().then(res => {
        if (res.code == 1) {
          this.areaTypeList = res.data
          return res.data
        } else {
          return []
        }
      })
    },

    // 每页条数
    handleSizeChange(val) {},

    // 当前页
    handleCurrentChange(val) {
      this.pageNum = val
      this.getScene()
    },

    // 取消新增场景
    cancelBtn() {
      // 清空未创建场景区域
      if (!this.editState && this.drawData.id) {
        gisObj.removeScene(this.drawData.id)
      }
      this.drawData = {}
      this.nameForm = {
        provId: '',
        cityId: '',
        zid: '',
        name: '',
        boundary: '',
        areaType: '',
        type: '',
        typeCode: '',
        townId: '',
        areaId: '',
      }

      // 去除正则状态
      this.$refs.sceneForm.resetFields()
      // 清空当前选中编辑的数据对象
      this.editNowData = {}

      // 根据当前新增或者编辑 设置
      if (this.editState) {
        this.editOver = true
      } else {
        this.newOver = true
      }
    },
    // 确定新增场景
    saveBtn() {
      this.$refs.sceneForm.validate(valid => {
        if (valid) {
          this.treeLoading = true
          console.log(this.nameForm)
          gisObj.setAttributes({
            id: this.nameForm.areaId,
            name: this.nameForm.name,
          })
          this.defaultCheck = [this.nameForm.areaId]
          if (this.editState) {
            this.api.updateArea(this.nameForm).then(data => {
              console.log(data)
              if (data.code == 1) {
                this.$message({
                  message: '编辑成功',
                  type: 'success',
                })
                gisObj.editArea(this.nameForm)
                gisObj.removeScene(this.nameForm.areaId)
                this.getScene()
              } else {
                this.$message({
                  message: '场景编辑失败,请联系管理员',
                  type: 'warning',
                })
              }
              this.nameDialog = false
            })
          } else {
            this.api.addArea(this.nameForm).then(res => {
              console.log(res)
              if (res.code == 1) {
                gisObj.addArea(this.nameForm)
                this.getScene()
                this.nameDialog = false
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // 新增场景,开始绘制
    createScene() {
      // 页面在新建编辑框打开中不可使用额外功能
      if (this.nameDialog) {
        this.$message({
          message: '请先完成新增或编辑功能!',
          type: 'warning',
        })
        return
      }
      if (this.editOver) {
        let timeId = new Date().getTime()
        gisObj.createScene(timeId.toString())
        this.editState = false
        this.newOver = false
      } else {
        this.$message({
          message: '双击地图完成编辑，请完成编辑再新增!',
          type: 'warning',
        })
      }
    },
    // 绘制结束触发
    sceneDrawEnd(data) {
      this.drawData = data
      // 配置相应默认值
      this.getZoneByBoundaries(data.boundary)
      this.nameForm.boundary = data.boundary
      this.nameForm.areaId = data.id
      this.nameForm.provId = this.home.userInfoVo.provinceId
      this.nameForm.cityId = this.home.userInfoVo.cityId
      console.log(data)
    },
    // 列表数据搜索
    inputSearch() {
      this.treeLoading = true
      this.getScene()
    },
    // 查询所有场景 -t
    getSceneArea() {
      // gisObj.clearArea()
      let { zoneId, ...ofterForm } = this.form
      this.api
        .queryCustomizeAreaBoundary({
          name: this.textInput,
          ...ofterForm,
        })
        .then(res => {
          // console.log(res, gisObj, 'getSceneArea')
          if (res.data) {
            gisObj.setArea(res.data)
            // this.ptsMap = gisObj.getPtsMap(res.data)
          }
        })
    },
    // 获取列表数据
    getScene(areaList, fun) {
      let { zoneId, ...ofterForm } = this.form

      this.api
        .queryCustomizeAreaPage({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          name: this.textInput,
          areaIdList: areaList || [],
          ...ofterForm,
        })
        .then(data => {
          if (this.pageNum > 1 && data.data.list.length == 0) {
            this.pageNum = this.pageNum - 1
            this.getScene()
            return
          }
          fun ? fun() : null
          this.treeLoading = false
          this.pageNum = data.data.pageNum
          this.total = data.data.total
          this.treeData = data.data.list
        })
    },
    // 获取行政区（测试用，后期删除）
    getZone() {
      this.api
        .getZone({
          cityId: this.home.userInfoVo.cityId,
        })
        .then(data => {
          this.dictionary = data.data
          this.$store.dispatch('gis/getDictionary', data.data)

          // 设置页面默认为全市;
          this.form.zoneId = data.data[0].id

          this.boundingLoad = true
          this.loading = false
        })
    },
    iframeLoaded() {
      this.iframeLoad = true
      // this.$nextTick(() => {
      //   this.getSceneArea()
      // })
    },
    nowInitMap() {
      gis.window.initMap({
        onLoad: this.mapLoaded,
        sceneDrawEnd: this.sceneDrawEnd,
        editEnded: this.editEnded,
        areaClicked: this.areaClicked,
      })
    },
    areaClicked(data, name) {
      // console.log(data, name)
      this.areaList.push(data)
      gisObj.locateById(data)
      gisObj.removeScene(this.oldCheckId)
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        // console.log(this.areaList)
        if (this.areaList.length > 1) {
          this.textInput = ''
        } else {
          this.textInput = name
        }
        this.treeLoading = true
        this.getScene(this.areaList, () => {
          this.areaList = []
        })
      }, 200)
    },
    mapLoaded(obj) {
      gisObj = obj
      this.getSceneArea()
      this.initBoundary()
    },
    // 设置边界
    setBoundaryWeb(id) {
      const item = this.dictionary.find(v => v.id == id)
      if (item) {
        console.log(item)
        gisObj.setBoundary(item)
      }
    },
    initBoundary() {
      this.setBoundaryWeb(this.home.userInfoVo.cityId)
    },
    // 添加场景
    setScene(val) {
      gisObj.addScene(val)
    },
    handleChange(value) {
      this.setBoundaryWeb(value)
    },

    // 获取 报告是否生成的状态
    getReportState() {
      this.api.getReportByStatus().then(res => {
        if (res.code == 1) {
          this.reportState = res.data
        }
      })
    },

    // 生成统计
    statisticsScene() {
      this.statisticsLoding = true
      this.api
        .statisticsScene({ cityId: this.home.userInfoVo.cityId })
        .then(res => {
          this.$message({
            message: '统计任务已开始!',
            type: 'success',
          })
          this.statisticsLoding = false
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.search-box {
  z-index: 1;
  position: absolute;
  width: 100%;
  top: 0;
  .search-bar {
    width: 100%;
    padding-right: 30px;
    border-top-left-radius: 0px;
    border-top-right-radius: 6px;
    height: 52px;
    background: rgba(255, 255, 255, 1);
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    ::v-deep .el-form-item,
    ::v-deep .el-form-item__content {
      // margin: 0;
      display: flex;
      height: 100%;
      margin: 0;
      align-items: center;
    }
  }
}
.customPage-main {
  padding-top: 52px;
}
.custom-page {
  .d-none {
    display: none !important;
  }
  .tree-box-padding {
    padding-top: 6px;
    height: 52px;
  }
  .show-box {
    z-index: 1;
    position: absolute;
    width: 300px;
    right: 0;
    height: 510px;
    top: 60px;
  }
  .show-menu-btn {
    cursor: pointer;
    position: absolute;
    top: 50%;
    z-index: 2;
    text-align: center;
    background: #99a2b1;
    height: 48px;
    line-height: 48px;
    width: 24px;
    color: #fff;
  }
  .hidden-left {
    border-radius: 0 8px 8px 0;
    left: 0;
  }
  .show-left {
    border-radius: 8px 0 0 8px;
    right: 0;
  }
  .tree-box-hidden {
    width: 0px !important;
    margin-right: 0px;
  }
  .tree-box {
    width: 255px;
    margin-right: 0;
    .tips-box {
      z-index: 1;
      font-size: 12px;
      color: #ff9000;
      padding: 8px 0 8px 15px;
    }
    .tree-text {
      color: #fff;
      font-size: 14px;
      line-height: 49px;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 28px;
    }
  }
  .map-box {
    flex: 1;
    overflow: hidden;
    position: relative;
    .map-bottom-left-box {
      display: flex;
      position: absolute;
      bottom: 15px;
      left: 50px;
    }
    .map-select-box span {
      padding: 0 5px;
      color: #fff;
      background: #0283e1;
      border-radius: 0px 0px 4px 0px;
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: 12px;
    }
    .map-select-box img {
      width: 100%;
      height: auto;
    }
    .map-select-box > div {
      width: 65px;
      height: 40px;
      border: 1px solid #dcdfe6;
      position: relative;
      margin-right: 5px;
      cursor: pointer;
    }

    .svg-icon {
      height: 14px;
      width: 14px;
      margin-right: 2px;
    }

    .button-box {
      position: absolute;
      z-index: 1;
      top: 52px;
      left: 10px;
      .button-btn {
        background: #79a2e6;
        padding: 15px;
        box-shadow: 0px 0px 12px 0px rgba(6, 14, 33, 0.16);
        border-radius: 50%;
        font-size: 16px;
        color: #fff;
      }
    }
  }
}
</style>
